<template>
	<s-layout id="layout" :title="''" :navbar="normal" leftIconColor="#ffffff" :autoBack="false" :leftIcon="leftIcon" :bgColor="'rgba(0,0,0,0)'" :tabbarshow='false' :titleStyle="{ color: '#FFF', fontSize: '32rpx',fontWeight:'600' }">
		<view id="app" :style="{ backgroundImage: `url(${baseUrl}/uploads/uniapp_image/user/user_user_background.png)`,paddingTop:(safeAreaInsets?.top + 44) + 'px',height:(516 - safeAreaInsets?.top - 44) + 'px'}">
			<view class="area">
				<view class="page_title">当前员工发薪明细</view>

				<!-- 收益明细 -->
				<view class="Income_list">
                    <!-- v-if="wallet_list.length != 0" -->
					<scroll-view scroll-y @scrolltolower='listScrolltolower' :style="{ height:`calc(100vh - ${safeAreaInsets?.top}px - 44px - 97px)` }">
						<view class="Income_detail">收益明细</view>
						<view class="Income_list_item" v-for="(item,index) in ccc" :key="index">
							<view class="pay_box">
                                <view class="month">24年6月薪资</view>
                                <view class="money earnings">¥3000</view>
                            </view>
                            <view class="time">2023-03-30 12:00:00</view>
						</view>

						<view v-if="total > 20">
							<s-loadmore-gather :current_page="current_page" :last_page="last_page" ref="loadmoreRef"></s-loadmore-gather>
						</view>
					</scroll-view>
					<!-- <u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容"></u-empty> -->
				</view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import { baseUrl } from '@/sheep/config';
	import sheep from '@/sheep';
	import { ref, reactive, unref, computed  } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { formatDatetime } from '@/utils/fn.js';
	const { safeAreaInsets } = uni.getSystemInfoSync()
	const userInfo = sheep.$store('user').userInfo;
	onLoad(() => {
		// user_money_logIndexList()
	})

    const ccc = ref([1,2,3,4,5,6,7,8,9,0]) 

	// const detail_heading = computed(() => {
	// 	return wallet_list.value.map(item => {
	// 		switch (item.event) {
	// 		case 'salary':
	// 			return '工资';
	// 			break;
	// 		case 'commission_reward':
	// 			return '佣金奖励';
	// 			break;
	// 		case 'withdraw':
	// 			return '提现';
	// 			break;
	// 		case 'recharge':
	// 			return '充值';
	// 			break;
	// 		}
	// 	})
	// })

	// function goUrl(url,state,tabs) {
	// 	uni.navigateTo({
	// 		url
	// 	})
	// }

	// 封装我的钱包接口
	// const wallet_list = ref([])
	// const page = ref(1)
	// const current_page = ref()
	// const last_page = ref()
	// const total = ref()
	// const total_income = ref()
	// const total_withdraw = ref()
	// const user_money_logIndexList = async () => {
	// 	let params = {
	// 		page:page.value
	// 	}
	// 	const res = await sheep.$api.wallet.user_money_logIndexAPI(params)
	// 	wallet_list.value = [...wallet_list.value,...res?.data.rows]
	// 	current_page.value = res.data.current_page
	// 	last_page.value = res.data.last_page
	// 	total.value = res.data.total
	// 	total_income.value = res.data.total_income
	// 	total_withdraw.value = res.data.total_withdraw
	// }

	// 滚动触底事件 + 分页处理
    // const loadmoreRef = ref()
    // const listScrolltolower = () => {
    //     loadmoreRef.value.PopupScrolltolower()
    //     if (current_page.value < last_page.value) {
    //         page.value += 1;
    //     } else {
    //         return;
    //     }
    //     user_money_logIndexList()
    // }

</script>

<style lang="scss">
	#app {
		background-size: contain; /* 或 cover */
		background-repeat :no-repeat;
	}

	// 版心
	.area {
		width: calc(100% - 40rpx);
		margin: 0 20rpx;
	}

	// 页面标题
	.page_title {
		font-family: PingFangSC;
		color: #FFFFFF;
		font-weight: 500;
		font-size: 54rpx;
		font-style: normal;
		text-decoration: none;
		text-align: left;
		margin: 20rpx 0rpx 30rpx 10rpx;
	}

	// 收益明细
	.Income_list {
		border-radius: 8px;
		background-color: #FFFFFF;
		box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
		padding: 30rpx 20rpx 0 20rpx;
		.Income_detail {
			font-family: PingFangSC;
			color: $uni-text-color;
			font-weight: 700;
			font-size: $uni-font-size-big;
			font-style: normal;
			text-decoration: none;
			text-align: left;
			margin-left: 10rpx;
			padding-bottom: 32rpx;
			border-bottom: 1px solid #EEEEEE;
		}
		.Income_list_item {
			padding: 30rpx 20rpx;
			border-bottom: 1px solid #EEEEEE;
            .pay_box {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 16rpx;
                .month {
                    font-family: PingFangSC;
                    color: $uni-text-color;
                    font-weight: $uni-font-weight;
                    font-size: 30rpx;
                    font-style: normal;
                    text-decoration: none;
                    text-align: left;
                }
            }
            .time {
                font-family: PingFangSC;
                color: #999999;
                font-weight: 500;
               font-size:$uni-font-size-26;
                font-style: normal;
                text-decoration: none;
                text-align: left;
            }
		}
	}

	// 伪类选择器：将最后一条数据的下边框去掉
	.Income_list_item:last-child {
		border-bottom: none;
	}

	// 薪资
	.earnings {
		font-family: PingFangSC;
		color: #FF6600;
		font-weight: 550;
		font-size: 30rpx;
		font-style: normal;
		text-decoration: none;
	}

</style>